<template>
  <div class="npm-yarn clearfix">
    <el-scrollbar style="height: 100%">
    <div class="main">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">npm</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            // 全局安装<br>
            npm install -g &lt;package&gt;<br>
            // 所有依赖<br>
            npm install<br>
            // 安装指定版本<br>
            npm install &lt;package&gt;@1.2.3<br>
            // 安装最新版本<br>
            npm i -g &lt;package&gt;@latest<br>
            // 删除包
            npm uninstall -g &lt;package&gt;<br>
            // 删除 node_modules 目录下面的包<br>
            npm uninstall &lt;package&gt;<br>
            // 删除 node_modules 目录下面的包，并从 package.json 文件中删除<br>
            npm uninstall --save &lt;package&gt;<br>
            // 更新全局包<br>
            npm update -g &lt;package&gt;<br>
            // 更新本地安装的包<br>
            在 package.json 文件所在的目录中执行 npm update 命令<br>
            执行 npm outdated 命令。不应该有任何输出。
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">yarn</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            // 全局安装<br>
            yarn global add package-name<br>
            // 所有依赖<br>
            yarn<br>
            // 安装指定版本<br>
            yarn add package-name@1.2.3<br>
            // 安装最新版本<br>
            yarn add package-name<br>
            // 删除包,会更新package.json和yarn.lock<br>
            yarn remove package-name<br>
            // 更新包<br>
            yarn upgrade<br>
            // 更新指定的包<br>
            yarn upgrade package-name
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">--save 和 --save-dev 之间的区别</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            // 共同点<br>
            两种方式都会安装到node_modules目录中。<br>
            两种方式都会保存到package.json文件中。<br>
            // 区别<br>
            // –save<br>
            会存放到”dependencies”<br>
            --save是对生产环境所需依赖的声明(开发应用中使用的框架，库)<br>
            比如：jq，react，vue都需要放到这里面<br>
            <br>
            // –save-dev<br>
            会存放到”devDependencies”<br>
            --save-dev是对开发环境所需依赖的声明(构建工具，测试工具)<br>
            比如：babel，webpack，都放到当前目录
          </code>
        </div>
      </el-card>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: 'NpmYarn'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.npm-yarn{
  margin: 0 auto;
  overflow: hidden;
  .main{
    column-count: 2;
    column-gap:10px;
    padding: 10px;
  }
  .el-card{
    margin: 10px 0;
  }
  .el-card__header{
    padding: 0 10px;
    text-align: left;
    font-size: 14px;
    line-height: 30px;
    line-height: 30px;
  }
}
</style>
